<template>
  <div class="grid">
    <!-- 通过 gutter 属性设置格子之间的距离。 -->
    <div v-for="index in 2">
      <van-grid :column-num="5">
        <van-grid-item
          v-for="value in list"
          :key="value"
          :icon="value.icon" 
          :text="value.text"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          icon: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
          text: "京东超市",
        },
        {
          icon: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
          text: "数码电器",
        },
        {
          icon: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
          text: "京东新百货",
        },
        {
          icon: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
          text: "京东生鲜",
        },
        {
          icon: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
          text: "京东到家",
        },
      ],
    };
  },
};
</script>
<style scoped></style>
